<template>
  <view>
    <view class="title">商城</view>
    <view class="sec1">
      <view class="serach">
        <view class="inputS">
          <image class="sous" src="../../static/Shopping/sous.png" />
          <input type="text" v-model="keyword" placeholder="请输入关键字搜索" />
          <view class="serbtn" @click="goodsIndex">搜索</view>
        </view>
      </view>
      <view class="banner">
        <swiper
          class="swiper"
          indicator-active-color="#fff"
          indicator-dots="true"
          circular
          autoplay="true"
          interval="3000"
          duration="1000"
        >
          <swiper-item v-for="(item, i) in banner" :key="i">
            <image
              :src="$IMG_URL + item.image"
              mode="widthFix"
              style="width: 100%"
            ></image>
          </swiper-item>
        </swiper>
      </view>
      <view class="tabs">
        <view
          v-for="(item, i) in listcategor"
          :key="i"
          @click="jumps(item.category_id, item.category_name)"
        >
          <image class="tabsIm" :src="item.image" mode="" />
          <view class="txt">{{ item.category_name }}</view>
        </view>
        <view @click="pushPath('../Shopping/Allclass')">
          <image
            class="tabsIm"
            src="https://www.123qifu.com/onlineimages/static/Shopping/shop4.png"
            mode=""
          />
          <view class="txt">全部分类</view>
        </view>
      </view>
    </view>
    <view class="recom">为您推荐</view>
    <view class="lists">
      <view
        class="item"
        @click="jump(item.id)"
        v-for="(item, i) in list"
        :key="i"
      >
        <image class="itemImg" :src="item.main_image" mode="" />
        <view class="des">{{ item.name }}</view>
        <view class="price"
          >￥{{ item.price }}
          <view class="or_price">￥{{ item.original_price }}</view></view
        >
      </view>
    </view>
    <view class="nodata" v-if="list.length == 0">
      <image class="nolt" src="../../static/nolt.png" mode="" />
      <text>没有搜索到相关内容~</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: "",
      page: 1, // 页码
      pageSize: 10, // 每页条数
      list: [],
      total: "",
      last_page: "",
      keyword: "",
      banner: "",
      listcategor: [],
    };
  },
  onShow() {
    this.goodsIndex();
    this.category();
  },
  onLoad() {
    this.getBanner();
  },
  onReachBottom() {
    if (this.total / 10 <= this.last_page && this.total > 10) {
      this.loadMore();
    }
  },
  methods: {
    // 路由跳转
    pushPath(item) {
      uni.navigateTo({
        url: item,
      });
    },
    // 获取商品轮播
    async getBanner() {
      const res = await this.$myRequest({
        url: "index/getBanner",
        method: "POST",
        data: {
          type: 4,
        },
      });
      this.banner = res.data.data;
    },
    // 获取商品列表
    async goodsIndex() {
      this.page = 1;
      const res = await this.$myRequest({
        url: "goods/index",
        method: "POST",
        data: {
          page: this.page, // 页码
          pageSize: this.pageSize, // 每页条数
          keyword: this.keyword,
        },
      });
      this.list = res.data.data.data;
      this.total = res.data.data.total;
      this.last_page = res.data.data.last_page;
    },
    // 获取商品下一页列表
    async loadMore() {
      const res = await this.$myRequest({
        url: "goods/index",
        method: "POST",
        data: {
          page: (this.page += 1), // 页码
          pageSize: this.pageSize, // 每页条数
          keyword: this.keyword,
        },
      });
      this.list = this.list.concat(res.data.data.data);
      this.total = res.data.data.total;
      this.last_page = res.data.data.last_page;
    },
    // 查看商品详情
    jump(i) {
      uni.navigateTo({
        url: "./prodetails?id=" + i,
      });
    },
    // 获取商品类别
    async category() {
      const res = await this.$myRequest({
        url: "goods/category",
        method: "get",
      });
      this.listcategor = res.data.data.hot;
    },
    // 查看商品类别
    jumps(i, shopName) {
      uni.navigateTo({
        url: "../Shopping/Classlist?id=" + i,
      });
      uni.setStorageSync("shopName", shopName);
    },
  },
  watch: {
    keyword: {
      immediate: true,
      handler: function (newVal, oldVal) {
        if (newVal === "") {
          //如果为空，执行方法获取list
          this.goodsIndex();
        }
      },
    },
  },
};
</script>

<style lang="scss">
page {
  width: 750rpx;
  background-color: #f4f4f4;
}
.title {
  width: 100%;
  height: 88rpx;
  text-align: center;
  line-height: 88rpx;
  background: #fff;
  font-size: 36rpx;
  font-weight: 500;
  color: #333333;
}
.sec1 {
  width: 100%;
  min-height: 450rpx;
  background: #ffffff;
  overflow: hidden;
}
.serach {
  width: 100%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .inputS {
    width: 714rpx;
    height: 64rpx;
    background: #f4f4f4;
    border-radius: 40rpx;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding-left: 70rpx;
    margin: 10rpx auto 0;
    .sous {
      position: absolute;
      width: 32rpx;
      height: 32rpx;
      left: 20rpx;
    }
    input {
      width: 60%;
      background: none;
      border: none;
      font-size: 28rpx;
      font-weight: 400;
      color: #999999;
    }
    .serbtn {
      width: 120rpx;
      height: 85%;
      text-align: center;
      font-size: 26rpx;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 40rpx;
      background: #c52b2e;
    }
  }
  .userImg {
    display: block;
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
  }
}
.banner {
  width: 710rpx;
  height: 326rpx;
  margin: 30rpx auto 0;
  border-radius: 18rpx;
  overflow: hidden;
  .swiper {
    width: 100%;
    height: 100%;
    border-radius: 18rpx;
    overflow: hidden;
  }
}
.tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 40rpx;
  margin: 30rpx auto 30rpx;
  .tabsIm {
    display: block;
    width: 92rpx;
    height: 92rpx;
    margin: 0 auto;
  }
  .txt {
    display: block;
    text-align: center;
    font-size: 28rpx;
    font-weight: 500;
    color: #1b1b1b;
    margin-top: 10rpx;
  }
}
.lists {
  width: 100%;
  box-sizing: border-box;
  padding: 0 20rpx;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-top: 10rpx;
  .item {
    width: 350rpx;
    height: 480rpx;
    background: #ffffff;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    border-radius: 10rpx;
    overflow: hidden;
    margin-bottom: 15rpx;
    .itemImg {
      display: block;
      width: 100%;
      height: 360rpx;
    }
    .des {
      width: 100%;
      box-sizing: border-box;
      padding: 10rpx 10rpx 0;
      font-size: 26rpx;
      color: #444444;
      font-weight: bold;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      line-clamp: 1;
      -webkit-box-orient: vertical;
    }
    .price {
      display: flex;
      align-items: flex-end;
      width: 100%;
      box-sizing: border-box;
      padding: 10rpx 10rpx 0;
      color: #c52b2e;
      font-size: 26rpx;
      font-weight: bold;
      .or_price {
        font-size: 22rpx;
        font-weight: 400;
        text-decoration: line-through;
        color: #999999;
        margin-left: 15rpx;
      }
    }
  }
}
.nodata {
  .nolt {
    display: block;
    width: 348rpx;
    height: 190rpx;
    margin: 200rpx auto 0;
  }
  text {
    display: block;
    text-align: center;
    font-size: 30rpx;
    font-weight: 400;
    color: #999999;
    margin-top: 24rpx;
  }
}
.recom {
  text-align: center;
  font-size: 30rpx;
  font-weight: 500;
  color: #c52b2e;
  margin: 38rpx auto 40rpx;
  position: relative;
}
.recom::before {
  position: absolute;
  content: "";
  width: 120rpx;
  height: 2rpx;
  background: #c52b2e;
  left: 170rpx;
  top: 50%;
  transform: translateY(-50%);
}
.recom::after {
  position: absolute;
  content: "";
  width: 120rpx;
  height: 2rpx;
  background: #c52b2e;
  right: 170rpx;
  top: 50%;
  transform: translateY(-50%);
}
</style>
